import { Card, CardBody, CardHeader } from "@heroui/react";

import DefaultLayout from "@/layouts/default";

export default function ECommercePage() {
  // Mock data for statistics
  const statsData = [
    { title: "总销售额", value: "¥123,456", change: "+12%", description: "较昨日" },
    { title: "订单量", value: "1,234", change: "+8%", description: "较昨日" },
    { title: "客户数", value: "567", change: "+5%", description: "较昨日" },
    { title: "转化率", value: "23.5%", change: "+2%", description: "较昨日" },
  ];

  // Mock data for sales chart
  const salesData = [
    { month: "1月", value: 65 },
    { month: "2月", value: 78 },
    { month: "3月", value: 90 },
    { month: "4月", value: 81 },
    { month: "5月", value: 95 },
    { month: "6月", value: 88 },
  ];

  // Mock data for products
  const products = [
    { id: 1, name: "iPhone 12", price: "¥6,999", sales: 120, inventory: 50 },
    { id: 2, name: "MacBook Pro", price: "¥12,999", sales: 85, inventory: 30 },
    { id: 3, name: "AirPods", price: "¥1,299", sales: 230, inventory: 100 },
    { id: 4, name: "iPad", price: "¥3,999", sales: 95, inventory: 40 },
    { id: 5, name: "Apple Watch", price: "¥2,999", sales: 150, inventory: 60 },
  ];

  // Mock data for categories
  const categories = [
    { id: 1, name: "电子产品", sales: 1200, percentage: 40 },
    { id: 2, name: "服装", sales: 800, percentage: 25 },
    { id: 3, name: "家居", sales: 600, percentage: 20 },
    { id: 4, name: "图书", sales: 400, percentage: 15 },
  ];

  // Mock data for recent orders
  const recentOrders = [
    { id: 1, customer: "张三", product: "iPhone 12", amount: "¥6,999", status: "已支付" },
    { id: 2, customer: "李四", product: "MacBook Pro", amount: "¥12,999", status: "已发货" },
    { id: 3, customer: "王五", product: "AirPods", amount: "¥1,299", status: "已完成" },
    { id: 4, customer: "赵六", product: "iPad", amount: "¥3,999", status: "待支付" },
    { id: 5, customer: "孙七", product: "Apple Watch", amount: "¥2,999", status: "已支付" },
  ];

  return (
    <DefaultLayout>
      <div className="flex flex-col gap-6 py-6">
        {/* Page Title */}
        <div className="flex flex-col gap-2">
          <h1 className="text-2xl font-bold">电商仪表板</h1>
          <p className="text-default-500">电商数据分析和业务洞察</p>
        </div>

        {/* Statistics Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {statsData.map((stat, index) => (
            <Card key={index} className="border-none shadow-sm">
              <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
                <p className="text-tiny uppercase font-bold text-default-500">{stat.title}</p>
                <h4 className="font-bold text-large">{stat.value}</h4>
              </CardHeader>
              <CardBody className="overflow-visible py-2">
                <div className="flex items-center gap-1">
                  <span className="text-success text-tiny">{stat.change}</span>
                  <span className="text-default-500 text-tiny">{stat.description}</span>
                </div>
              </CardBody>
            </Card>
          ))}
        </div>

        {/* Charts Section */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Sales Chart */}
          <div className="lg:col-span-2">
            <Card className="shadow-sm">
              <CardHeader className="flex gap-3">
                <div className="flex flex-col">
                  <p className="text-md">销售趋势</p>
                  <p className="text-small text-default-500">近6个月销售数据</p>
                </div>
              </CardHeader>
              <CardBody>
                {/* Simple bar chart representation */}
                <div className="flex items-end justify-between h-64 gap-2">
                  {salesData.map((item, index) => (
                    <div key={index} className="flex flex-col items-center flex-1">
                      <div className="text-tiny text-default-500 mb-2">{item.month}</div>
                      <div 
                        className="w-full bg-primary rounded-t-lg transition-all duration-500 ease-in-out hover:opacity-80"
                        style={{ height: `${item.value}%` }}
                      ></div>
                      <div className="text-tiny mt-2">{item.value}</div>
                    </div>
                  ))}
                </div>
              </CardBody>
            </Card>
          </div>

          {/* Categories */}
          <div>
            <Card className="shadow-sm">
              <CardHeader className="flex gap-3">
                <div className="flex flex-col">
                  <p className="text-md">商品分类</p>
                  <p className="text-small text-default-500">销售占比</p>
                </div>
              </CardHeader>
              <CardBody>
                <div className="space-y-4">
                  {categories.map((category) => (
                    <div key={category.id} className="flex flex-col gap-2">
                      <div className="flex justify-between">
                        <p className="text-md font-medium">{category.name}</p>
                        <p className="text-small text-default-500">{category.sales} 件</p>
                      </div>
                      <div className="w-full bg-default-100 rounded-full h-2">
                        <div 
                          className="bg-primary h-2 rounded-full" 
                          style={{ width: `${category.percentage}%` }}
                        ></div>
                      </div>
                      <p className="text-small text-default-500">{category.percentage}%</p>
                    </div>
                  ))}
                </div>
              </CardBody>
            </Card>
          </div>
        </div>

        {/* Products and Recent Orders */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Top Selling Products */}
          <Card className="shadow-sm">
            <CardHeader>
              <p className="text-md">热销商品</p>
            </CardHeader>
            <CardBody>
              <div className="space-y-3">
                {products.map((product) => (
                  <div key={product.id} className="flex items-center justify-between py-2 border-b border-default-200 last:border-0">
                    <div className="flex flex-col">
                      <p className="text-md font-medium">{product.name}</p>
                      <p className="text-small text-default-500">{product.price}</p>
                    </div>
                    <div className="flex flex-col items-end">
                      <p className="text-small text-default-500">销量: {product.sales}</p>
                      <p className="text-small text-default-500">库存: {product.inventory}</p>
                    </div>
                  </div>
                ))}
              </div>
            </CardBody>
          </Card>

          {/* Recent Orders */}
          <Card className="shadow-sm">
            <CardHeader>
              <p className="text-md">最近订单</p>
            </CardHeader>
            <CardBody>
              <div className="space-y-3">
                {recentOrders.map((order) => (
                  <div key={order.id} className="flex items-center justify-between py-2 border-b border-default-200 last:border-0">
                    <div className="flex flex-col">
                      <p className="text-md font-medium">{order.customer}</p>
                      <p className="text-small text-default-500">{order.product}</p>
                    </div>
                    <div className="flex flex-col items-end">
                      <p className="text-md font-medium">{order.amount}</p>
                      <span className={`px-2 py-1 rounded text-tiny font-medium ${
                        order.status === "已支付" || order.status === "已完成"
                          ? "bg-success/20 text-success" 
                          : order.status === "已发货"
                            ? "bg-warning/20 text-warning" 
                            : "bg-default/20 text-default"
                      }`}>
                        {order.status}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </CardBody>
          </Card>
        </div>
      </div>
    </DefaultLayout>
  );
}